<template>
  <div class="aboutbox">
    <!-- <header class="header">
      <ul>
        <li><i class="iconfont icon-jiantou1" @click="backing"></i></li>
        <li>关于我们</li>
        <li></li>
      </ul>
    </header> -->
    <Header>
      关于我们
    </Header>
    <div class="content yjy">
      <div class="cont_list">
        <van-collapse v-model="activeNames">
          <van-collapse-item name="1">
            <div slot="title">胡凯军(组长) </div>
            <div slot="value">个人中心</div>
            <div slot="default">前端：优惠券，积分，查询订单逻辑，订单页面</div>
            <div slot="default">接口：优惠券，积分增删改查</div>
          </van-collapse-item>
          <van-collapse-item name="2">
            <div slot="title">俞佳艳 </div>
            <div slot="value">个人中心</div>
            <div slot="default">前端：地址，足迹，登录，注册，付款页面</div>
            <div slot="default">接口：登录注册，地址增删改查</div>
          </van-collapse-item>
          <van-collapse-item name="3">
            <div slot="title">蒋涵 </div>
            <div slot="value">购物车，门店</div>
            <div slot="default">前端：购物车，门店</div>
            <div slot="default">接口：商品增删改查</div>
          </van-collapse-item>
          <van-collapse-item name="4">
            <div slot="title">李管龙 </div>
            <div slot="value">首页</div>
            <div slot="default">前端：到店点单，外卖速达，分享，搜索页面</div>
            <div slot="default">接口：查询商品，导入商品数据</div>
          </van-collapse-item>
          <van-collapse-item name="5">
            <div slot="title">黄平 </div>
            <div slot="value">首页</div>
            <div slot="default">前端：首页渲染，详情页制作，banner图</div>
            <div slot="default">接口：搜索商品，分类接口</div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { Collapse, CollapseItem } from 'vant'
import Header from '@/components/header.vue'
Vue.use(Collapse).use(CollapseItem)
export default {
  data () {
    return {
      activeNames: [''],
      accordion: true,
      border: true
    }
  },
  components: {
    Header
  },
  methods: {
    backing () {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.aboutbox {
  @include rect(100%, 100%);
  @include flexbox();
  @include flex-direction(column);
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .header {
    @include rect(100%, 0.55rem);
    @include border(0 0 1px 0, solid #bfbfbf);
    @include background-color(#ec9d43cc);
    @include color(#fff);
    @include font-size(16px);
    line-height: 0.51rem;
    ul {
      @include flexbox();
      @include justify-content(space-between);
      li {
        float: left;
        @include rect(0.88rem, 100%);
        @include text-align();
        &:nth-child(1) {
          @include rect(0.5rem, 100%);
          @include text-align();
          i {
            @include font-size(24px);
          }
        }
        &:nth-child(2) {
          @include rect(auto, 100%);
          @include text-align();
          @include line-height(0.55rem);
          @include margin(0 0 0 0.4rem);
        }
      }
    }
  }
  .yjy {
    @include flex();
    @include rect(100%, 100%);
    @include overflow();
    .cont_list {
      .van-collapse-item {
        .van-collapse-item__content {
          div {
            padding: 10px;
            font-size: 16px;
          }
        }
        .van-cell__title {
          div {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>
